<template>
  <div>
    <div>
      <img
        src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/9e46fbd82937590e86ee3368c2a2adaf.jpg"
        alt=""
      />
      <MySwiper :imgarr="imgarr" />
      <div>
        <img
          src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f835c4b8862f29f6724e70fc67c57e46.jpg"
          alt=""
        />
      </div>
      <img
        src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/7fcafee3de965b5a5e1560d019caa6c8.jpg"
        alt=""
      />
      <img
        src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/0989afa8061b0eba4910ffae6e468927.jpg"
        alt=""
      />
      <img
        src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/a96e6ba9fee3862c60f1daa0d395ce8b.jpg"
        alt=""
      />
      <img
        src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/813b6aa9e5a0e6710909431ca3e97b85.jpg"
        alt=""
      />
      <div class="zhuanti">
        <img
          src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f7235273f7b53b571e47a23d6dc1c98a.jpg"
          alt=""
        />
        <img
          src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/b89a732863fcef07c1a105e869a3ecfe.jpeg"
          alt=""
        />
      </div>
      <div class="xueyuan">
        <p>摄影学院</p>
        <div class="xueyuan-r">
          <img
            src="https://cdn.cnbj1.fds.api.mi-img.com/user-avatar/9dd0dc64-c363-45c6-9ffe-0b9af09be168.jpg?thumb=150x150"
            alt=""
          />
          <img
            src="https://cdn.cnbj1.fds.api.mi-img.com/user-avatar/7d99281b-94f9-4d83-9a81-1cbeb46c56cc.jpg?thumb=150x150"
            alt=""
          />
          <img
            src="https://cdn.cnbj1.fds.api.mi-img.com/user-avatar/b8e89c9b-e666-4994-9c09-b49f74518e79.jpg?thumb=150x150"
            alt=""
          />
          <span>共四篇内容 &gt;</span>
        </div>
      </div>
      <ul class="bottom">
        <li>
          <img
            src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/caa480fbe172e74519be34cdf1257f88.jpg"
            alt=""
          />

          <div class="bottom-b">
            <p>【摄影技巧】第2篇：如</p>
            <img
              src="https://cdn.cnbj1.fds.api.mi-img.com/user-avatar/b8e89c9b-e666-4994-9c09-b49f74518e79.jpg?thumb=150x150"
              alt=""
            />
            <span>揭阳大雨</span>
            <i>2973</i>
          </div>
        </li>
        <li>
          <img
            src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/caa480fbe172e74519be34cdf1257f88.jpg"
            alt=""
          />

          <div class="bottom-b">
            <p>【摄影技巧】第2篇：如</p>
            <img
              src="https://cdn.cnbj1.fds.api.mi-img.com/user-avatar/b8e89c9b-e666-4994-9c09-b49f74518e79.jpg?thumb=150x150"
              alt=""
            />
            <span>揭阳大雨</span>
            <i>2973</i>
          </div>
        </li>
        <li>
          <img
            src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/caa480fbe172e74519be34cdf1257f88.jpg"
            alt=""
          />

          <div class="bottom-b">
            <p>【摄影技巧】第2篇：如</p>
            <img
              src="https://cdn.cnbj1.fds.api.mi-img.com/user-avatar/b8e89c9b-e666-4994-9c09-b49f74518e79.jpg?thumb=150x150"
              alt=""
            />
            <span>揭阳大雨</span>
            <i>2973</i>
          </div>
        </li>
        <li>
          <img
            src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/caa480fbe172e74519be34cdf1257f88.jpg"
            alt=""
          />

          <div class="bottom-b">
            <p>【摄影技巧】第2篇：如</p>
            <img
              src="https://cdn.cnbj1.fds.api.mi-img.com/user-avatar/b8e89c9b-e666-4994-9c09-b49f74518e79.jpg?thumb=150x150"
              alt=""
            />
            <span>揭阳大雨</span>
            <i>2973</i>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import MySwiper from "../../../components/swiper/swiper.vue";
export default {
  name: "sheying",
  data() {
    return {
      imgarr: [
        "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/5297a94bea0f3d3c6a04b9d30ec7e08e.jpg?w=1080&h=630&bg=101010",
        "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/4f664a1168c9c2a6c8e1e0a35915ed16.jpg?w=1080&h=630&bg=F0F0F",
        "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/79183f8f7249b88d5841e7fbffbb8140.jpg?w=1080&h=630&bg=E0E0E",
      ],
    };
  },
  components: {
    MySwiper,
  },
};
</script>

<style>
.bottom {
  height: 2.1rem;
  white-space: nowrap;
  background-color: black;
  overflow-x: auto;
}
.bottom li {
  width: 1.41rem;
  display: inline-block;
  border-radius: 0.1rem;
  overflow: hidden;
  margin-right: 0.05rem;
}
.bottom li .bottom-b {
  height: 0.69rem;
  background-color: white;
  font-size: 0.12rem;
  padding: 0.1rem;
}
.bottom li .bottom-b img {
  width: 0.18rem;
  height: 0.18rem;
  border-radius: 50%;
  display: inline-block;
  margin-right: 0.2rem;
}
.bottom li img {
  width: 1.41rem;
  height: 1.41rem;
}
.zhuanti {
  display: flex;
}
.zhuanti img {
  width: 50%;
}
.xueyuan {
  padding: 0 0.1rem;
  height: 0.6rem;
  background-color: black;
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.xueyuan-r {
  display: flex;
}
.xueyuan-r img {
  display: inline-block;
  width: 0.145rem;
  height: 0.145rem;
  border-radius: 50%;
}
</style>